<template>
    <div>
        <h2 class="home-title">
            {{ title }}
        </h2>
        <ul class="me-ul">
            <li v-for="item in items" :key="item.id">
                <h3 class="blog-title">
                    <span>
                        <router-link :to="{path:'/list/' + item.type_id}"
                                     :title="item.type_info.name"
                                     class="class-name">
                            {{ item.type_info.name }}
                        </router-link>
                    </span>

                    <router-link :to="{path:'/article/' + item.id}"
                                 :title="item.title">
                        {{ item.title }}
                    </router-link>
                </h3>
                <div class="blog-info">
                    <div class="blog-image" v-if="item.thumb_image">
                        <img :src="item.thumb_image"
                             preview="0"
                             :preview-text="item.title"
                             class="img-responsive preview-img" :alt="item.title"/>
                    </div>
                    <p>
                        <router-link :to="{path:'/article/' + item.id, params:{id: item.id}}">
                            {{ item.excerpt }}
                        </router-link>
                    </p>
                </div>
                <div class="author">
                    <span class="lm"></span>
                    <span class="time">
                        {{ item.created_at }}
                    </span>
                    <span class="view-num">
                        浏览（<router-link :to="{path:'/article/' + item.id, params:{id: item.id}}">{{ item.view_num }}</router-link>）
                    </span>
                    <span class="pull-right">
                        <router-link :to="{path:'/article/' + item.id, params:{id: item.id}}" class="more">
                            阅读原文>>
                        </router-link>
                    </span>
                </div>
                <div class="line"></div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "items",
        props: {
            title: String,
            items: {
                type: Array,
                default: []
            }
        },
    }
</script>

<style lang="scss" scoped>
    div.blog-image {
        width: 30%;
        float: left;
        margin-right: 20px;
        cursor: pointer;
    }

    .me-ul {
        padding-left: 0;
    }

    .line {
        width: 0;
        height: 2px;
        background: #333;
        -moz-transition: all 5s ease;
        -webkit-transition: all 5s ease;
        transition: all 5s ease;
    }

    .author {
        width: 100%;
        overflow: hidden;
        clear: both;
        margin: 20px 0 0 0;
        display: inline-block;
        color: #838383;
        font-size: 12px;

        span {
            float: left !important;
            margin: 0 10px 0 0;
            padding-left: 20px;
            a {
                color: #096;
            }
            a:hover {
                text-decoration: underline
            }
        }

        span:last-child {
            float: right !important;
        }
    }

    .blog-title {
        line-height: 30px;
        min-height: 30px;
        margin: 10px 0;
        span {
            box-sizing: content-box;
            display: inline-block;
            background: #333;
            padding: 2px 8px;
            font-size: 14px;
            color: #FFF;
            border-radius: 2px;
            position: relative;
            margin-right: 20px;
            line-height: normal;
            a {
                color: #fff;
                font-size: 14px;
                &:hover {
                    color: #fff;
                    text-decoration: none;
                }
            }

            &:after {
                content: "";
                width: 0;
                height: 0;
                border-left: 6px solid #333;
                border-top: 6px solid transparent;
                border-bottom: 6px solid transparent;
                margin: 0;
                padding: 0;
                position: absolute;
                right: -6px;
                top: 6px
            }
        }

        a {
            font-size: 16px;
            font-weight: bold;
        }
    }

    .lm {
        background: url(../../../images/news-bg-01.png) no-repeat left center
    }

    .time {
        background: url(../../../images/post-time.gif) no-repeat left center
    }

    .view-num {
        background: url(../../../images/news-bg-04.png) no-repeat left center
    }
</style>